import NodeBox from '../NodeBox/NodeBox'
import ToolBar from '../toolbar/ToolBar'
import BaseForm from '../baseform/BaseForm'
import EncoderForm from '../encoderform/EncoderForm'
import '../NodeBox/customNode'
import TaskNode from '../NodeBox/lib/TaskNode'

import {Graph, Shape, Addon} from '@antv/x6'

const {Stencil} = Addon
const {Rect, Circle} = Shape

export default {
  components: {EncoderForm, BaseForm, ToolBar, NodeBox},
  data () {
    return {
      graph: null,
      editNode: null,
      editNodeData: null,
      drawer: {
        attrRight: false
      },
      activeName: 'first',
      flowConfigure: {
        nodes: [
          {
            id: 'node1',
            shape: 'rect', // 使用 rect 渲染
            x: 100,
            y: 200,
            width: 160,
            height: 60,
            label: 'xxx',
            data: {
              name: '我靠',
              nodeType: 'asfdsa',
              code: '张三',
              alias: 'api006',
              desc: 'desc',
              nodeData: {
                keepOldOut: true,
                retryTotal: 1
              }
            },
            attrs: {
              body: {
                fill: 'rgba(0,0,0,0.02)', // 背景颜色
                stroke: '#5F95FF',  // 边框颜色
              },
              label: {
                text: '我靠',    // 文本
                fill: '#333',    // 文字颜色
                fontSize: 13,    // 文字大小
              },
            },
            ports: {
              groups: {
                // 输入链接桩群组定义
                top: {
                  position: 'top',
                  visible: false,
                  attrs: {
                    circle: {
                      r: 4,
                      magnet: true,
                      stroke: '#5F95FF',
                      strokeWidth: 1,
                      fill: '#fff',
                    },
                  },
                },
                left: {
                  position: 'left',
                  attrs: {
                    circle: {
                      r: 4,
                      magnet: true,
                      stroke: '#5F95FF',
                      strokeWidth: 1,
                      fill: '#fff',
                    },
                  },
                },
                bottom: {
                  position: 'bottom',
                  attrs: {
                    circle: {
                      r: 4,
                      magnet: true,
                      stroke: '#5F95FF',
                      strokeWidth: 1,
                      fill: '#fff',
                    },
                  },
                }, right: {
                  position: 'right',
                  attrs: {
                    circle: {
                      r: 4,
                      magnet: true,
                      stroke: '#5F95FF',
                      strokeWidth: 1,
                      fill: '#fff',
                    },
                  },
                },
              },
              items: [
                {
                  id: 'port1',
                  group: 'top',
                },
                {
                  id: 'port2',
                  group: 'left',
                },
                {
                  id: 'port3',
                  group: 'bottom',
                },
                {
                  id: 'port4',
                  group: 'right',
                },
              ],
            },
          },
          {
            id: 'node2',
            shape: 'ellipse', // 使用 ellipse 渲染
            x: 300,
            y: 200,
            width: 80,
            height: 40,
            label: 'hello',
            data: {
              name: '我111靠',
              nodeType: 'asfdsa',
              code: '张三',
              alias: 'api006',
              desc: 'desc',
              nodeData: {
                keepOldOut: true,
                retryTotal: 1
              }
            },
            attrs: {
              body: {
                fill: 'rgba(0,0,0,0.02)', // 背景颜色
                stroke: '#5F95FF',  // 边框颜色
              },
              label: {
                text: '开始',    // 文本
                fill: '#333',    // 文字颜色
                fontSize: 13,    // 文字大小
              },
            }
          },
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
            label: 'x687514445464646789797646',
            attrs: {
              line: {
                stroke: '#5F95FF',
                strokeWidth: 1,
                targetMarker: {
                  name: 'classic',
                  size: 8,
                },
              },
            },
            router: {
              name: 'manhattan',
            }
          }
        ],
      }
    }
  },
  mounted () {
    this.init2()
  },
  methods: {
    updateFormData (data) {
      this.editNode.attr('label/text', data.name)
    },
    allowDrop (event) {
      event.preventDefault()
    },
    onDrop (event) {
      event.preventDefault()
      let strData = event.dataTransfer.getData('jsonData')
      let jsonData = JSON.parse(strData)
      console.log(jsonData)
      let x = event.clientX
      let y = event.clientY
      console.log(`坐标:${x}位置${y}`)
      // event.target.appendChild(document.getElementById(data))
      this.graph.addNode({
        x: x,
        y: y,
        width: 260,
        height: 60,
        shape: 'vue-shape',
        ports: {
          groups: {
            // 输入链接桩群组定义
            top: {
              position: 'top',
              visible: false,
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            },
            left: {
              position: 'left',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            },
            bottom: {
              position: 'bottom',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            }, right: {
              position: 'right',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            },
          },
          items: [
            {
              id: 'port1',
              group: 'top',
            },
            {
              id: 'port2',
              group: 'left',
            },
            {
              id: 'port3',
              group: 'bottom',
            },
            {
              id: 'port4',
              group: 'right',
            },
          ],
        },
        data: {
          name: 'dsfsafasdafasd',
        },
        component: {
          template: `<task-node class="api-node"></task-node>`,
          data () {
            return {}
          },
          components: {
            TaskNode,
          }
        }
      })
    },
    init () {
      this.initGraph()
      this.initBindEvent()
      this.graph.addNode({
        x: 200,
        y: 160,
        width: 260,
        height: 60,
        shape: 'vue-shape',
        ports: {
          groups: {
            // 输入链接桩群组定义
            top: {
              position: 'top',
              visible: false,
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            },
            left: {
              position: 'left',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            },
            bottom: {
              position: 'bottom',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            }, right: {
              position: 'right',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            },
          },
          items: [
            {
              id: 'port1',
              group: 'top',
            },
            {
              id: 'port2',
              group: 'left',
            },
            {
              id: 'port3',
              group: 'bottom',
            },
            {
              id: 'port4',
              group: 'right',
            },
          ],
        },
        data: {
          name: 'dsfsafasdafasd',
        },
        component: {
          template: `<task-node class="api-node"></task-node>`,
          data () {
            return {}
          },
          components: {
            TaskNode,
          }
        }
      })
      this.graph.addNode({
        x: 500,
        y: 160,
        width: 120,
        height: 60,
        shape: 'vue-shape',
        ports: {
          groups: {
            // 输入链接桩群组定义
            top: {
              position: 'top',
              visible: false,
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            },
            left: {
              position: 'left',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            },
            bottom: {
              position: 'bottom',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            }, right: {
              position: 'right',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            },
          },
          items: [
            {
              id: 'port1',
              group: 'top',
            },
            {
              id: 'port2',
              group: 'left',
            },
            {
              id: 'port3',
              group: 'bottom',
            },
            {
              id: 'port4',
              group: 'right',
            },
          ],
        },
        attrs: {
          body: {
            width: 200,
            height: 200,
            // strokeWidth: 1,
            // stroke: '#409eff',
          }
        },
        data: {
          name: 'dsfsafasdafasd',
        },
        component: {
          template: `<task-node class="start-node"></task-node>`,
          data () {
            return {}
          },
          components: {
            TaskNode,
          }
        }
      })
      const stencil = new Addon.Stencil({
        title: 'Components',
        target: this.graph,
        search: true,
        collapsable: true,
        stencilGraphWidth: 200,
        stencilGraphHeight: 180,
        groups: [
          {
            name: 'group1',
            title: 'Group(Collapsable)',
          },
          {
            name: 'group2',
            title: 'Group',
            collapsable: false,
          },
        ],
      })
      this.$refs.stencilContainer.appendChild(stencil.container)
      // 创建节点
      const r = new Shape.Rect({
        width: 70,
        height: 40,
        attrs: {
          rect: {fill: '#31D0C6', stroke: '#4B4A67', strokeWidth: 6},
          text: {text: 'rect', fill: 'white'},
        },
      })

      stencil.load([r], 'group1')
      console.log(stencil)
      //this.graph.addNode(rect);
      console.log('架子啊')

    },
    init2 () {
      const graph = new Graph({
        container: this.$refs.container,
        snapline: true,
        scroller: {
          enabled: true,
          pannable: true,
          pageVisible: true,
          pageBreak: false,
        },
        mousewheel: {
          enabled: true,
          modifiers: ['ctrl', 'meta'],
        },
        minimap: {
          enabled: true,
          container: document.getElementById('minimapContainer'),
        },
        background: {
          color: 'white', // 设置画布背景颜色
        },
        grid: {
          size: 10,      // 网格大小 10px
          visible: true, // 渲染网格背景
        },
      })

      const source = graph.addNode({
        x: 130,
        y: 30,
        width: 100,
        height: 40,
        attrs: {
          label: {
            text: 'Hello',
            fill: '#6a6c8a',
          },
          body: {
            stroke: '#31d0c6',
          },
        },
      })
      const target = graph.addNode({
        x: 320,
        y: 240,
        width: 100,
        height: 40,
        attrs: {
          label: {
            text: 'World',
            fill: '#6a6c8a',
          },
          body: {
            stroke: '#31d0c6',
          },
        },
      })

      graph.addEdge({source, target})
      //
      // graph.centerContent()

      const stencil = new Stencil({
        title: 'Components',
        target: graph,
        search: true,
        collapsable: true,
        columns: 1,
        stencilGraphWidth: 200,
        stencilGraphHeight: 200,
        groups: [
          {
            name: 'group1',
            title: 'Group(Collapsable)',
          },
          {
            name: 'group2',
            title: 'Group',
            collapsable: true,
            resizeToFit: true
          },
        ],
      })

      this.$refs.stencilContainer.appendChild(stencil.container)

      const r = new Rect({
        width: 70,
        height: 40,
        attrs: {
          rect: {fill: '#31D0C6', stroke: '#4B4A67', strokeWidth: 6},
          text: {text: 'rect', fill: 'white'},
        },
      })

      const c = new Circle({
        width: 60,
        height: 60,
        attrs: {
          circle: {fill: '#FE854F', strokeWidth: 6, stroke: '#4B4A67'},
          text: {text: 'ellipse', fill: 'white'},
        },
      })

      const c2 = new Circle({
        width: 60,
        height: 60,
        attrs: {
          circle: {fill: '#4B4A67', 'stroke-width': 6, stroke: '#FE854F'},
          text: {text: 'ellipse', fill: 'white'},
        },
      })

      const r2 = new Rect({
        width: 70,
        height: 40,
        attrs: {
          rect: {fill: '#4B4A67', stroke: '#31D0C6', strokeWidth: 6},
          text: {text: 'rect', fill: 'white'},
        },
      })

      const r3 = new Rect({
        width: 70,
        height: 40,
        attrs: {
          rect: {fill: '#31D0C6', stroke: '#4B4A67', strokeWidth: 6},
          text: {text: 'rect', fill: 'white'},
        },
      })

      const c3 = new Circle({
        width: 60,
        height: 60,
        attrs: {
          circle: {fill: '#FE854F', strokeWidth: 6, stroke: '#4B4A67'},
          text: {text: 'ellipse', fill: 'white'},
        },
      })

      stencil.load([r], 'group1')
      // stencil.load([c2.clone(), r2, r3, c3], 'group2')
      // stencil.load([c2.clone(), c2.clone(), c2.clone(), c2.clone(),c2.clone(),], 'group2')
      console.log('架子啊')
      let testnode = new Shape(
        {
          x: 500,
          y: 160,
          width: 120,
          height: 60,
          shape: 'vue-shape',
          ports: {
            groups: {
              // 输入链接桩群组定义
              top: {
                position: 'top',
                visible: false,
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                  },
                },
              },
              left: {
                position: 'left',
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                  },
                },
              },
              bottom: {
                position: 'bottom',
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                  },
                },
              }, right: {
                position: 'right',
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                  },
                },
              },
            },
            items: [
              {
                id: 'port1',
                group: 'top',
              },
              {
                id: 'port2',
                group: 'left',
              },
              {
                id: 'port3',
                group: 'bottom',
              },
              {
                id: 'port4',
                group: 'right',
              },
            ],
          },
          attrs: {
            body: {
              width: 200,
              height: 200,
              // strokeWidth: 1,
              // stroke: '#409eff',
            }
          },
          data: {
            name: 'dsfsafasdafasd',
          },
          component: {
            template: `<task-node class="start-node"></task-node>`,
            data () {
              return {}
            },
            components: {
              TaskNode,
            }
          }
        }
      )
      stencil.load(testnode, 'group1')
      graph.addNode({
        x: 200,
        y: 160,
        width: 260,
        height: 60,
        shape: 'vue-shape',
        ports: {
          groups: {
            // 输入链接桩群组定义
            top: {
              position: 'top',
              visible: false,
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            },
            left: {
              position: 'left',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            },
            bottom: {
              position: 'bottom',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            }, right: {
              position: 'right',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            },
          },
          items: [
            {
              id: 'port1',
              group: 'top',
            },
            {
              id: 'port2',
              group: 'left',
            },
            {
              id: 'port3',
              group: 'bottom',
            },
            {
              id: 'port4',
              group: 'right',
            },
          ],
        },
        data: {
          name: 'dsfsafasdafasd',
        },
        component: {
          template: `<task-node class="api-node"></task-node>`,
          data () {
            return {}
          },
          components: {
            TaskNode,
          }
        }
      })
      graph.addNode({
        x: 500,
        y: 160,
        width: 120,
        height: 60,
        shape: 'vue-shape',
        ports: {
          groups: {
            // 输入链接桩群组定义
            top: {
              position: 'top',
              visible: false,
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            },
            left: {
              position: 'left',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            },
            bottom: {
              position: 'bottom',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            }, right: {
              position: 'right',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            },
          },
          items: [
            {
              id: 'port1',
              group: 'top',
            },
            {
              id: 'port2',
              group: 'left',
            },
            {
              id: 'port3',
              group: 'bottom',
            },
            {
              id: 'port4',
              group: 'right',
            },
          ],
        },
        attrs: {
          body: {
            width: 200,
            height: 200,
            // strokeWidth: 1,
            // stroke: '#409eff',
          }
        },
        data: {
          name: 'dsfsafasdafasd',
        },
        component: {
          template: `<task-node class="start-node"></task-node>`,
          data () {
            return {}
          },
          components: {
            TaskNode,
          }
        }
      })
    },
    initGraph () {
      this.graph = new Graph({
        container: document.getElementById('container'),
        selecting: {
          enabled: true,
          multiple: true,
          rubberband: false,
          movable: true,
          showNodeSelectionBox: true,
          className: 'my-selection'
        },
        snapline: true,
        scroller: {
          enabled: true,
          pannable: true,
          pageVisible: true,
          pageBreak: false,
        },
        mousewheel: {
          enabled: true,
          modifiers: ['ctrl', 'meta'],
        },
        minimap: {
          enabled: true,
          container: document.getElementById('minimapContainer'),
        },
        background: {
          color: 'white', // 设置画布背景颜色
        },
        grid: {
          size: 10,      // 网格大小 10px
          visible: true, // 渲染网格背景
        },
      })//.fromJSON(this.flowConfigure)
    },
    initBindEvent () {
      this.graph.on('cell:click', ({e, x, y, cell, view}) => {
        console.log('click')
      })
      this.graph.on('node:dblclick', ({e, x, y, node, view}) => {
        // this.editNode = node
        // this.drawer.attrRight = !this.drawer.attrRight
        // if (node.data == null || node == undefined) {
        //   node.data = {}
        //   node.data.id = node.id
        // }
        // this.editNodeData = node.data
        console.log('dblclick')

      })
      this.graph.on('edge:click', ({e, x, y, edge, view}) => {
        //   alert(333)
      })
      this.graph.on('blank:click', ({e, x, y}) => {
        console.log('blankclick')

      })
      this.graph.on('cell:mouseenter', ({e, x, y}) => {
        console.log(111)
      })

      this.graph.on('cell:mouseleave', ({e, x, y}) => {
        console.log(111)
      })
    }
  }
}
